<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
      <script type="text/javascript"> 

          function imgChange(img) {
            // 生成一个文件读取的对象
            debugger; // 手写断点
            const reader = new FileReader();
            reader.onload = function (ev) {
                // base64码
                var imgFile =ev.target.result;//或e.target都是一样的
                document.querySelector("img").src= ev.target.result;
            }
            //发起异步读取文件请求，读取结果为data:url的字符串形式，
            reader.readAsDataURL(img.files[0]);
           }
        /** 
         * 上传 
         */
        function upload(){ 
          //base64 转 blob 
          var base64= document.getElementById("img").src
          $.post("upload1", {file:base64}, (data) => {
              if (data == 'success') {
                alert("成功")
              }
          }, "text")
          
        } 
      </script> 
    </head> 
    <body> 
    <button onclick="upload()">上传测试</button> 
    <br />
    <input type="file" id="file" onchange="imgChange(this)" /> 
    上传的图片: 
    <img id="img" src="" alt="预览" /> 
    </body> 
    </html>
